<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
</head>

<style>
    * {
        box-sizing: border-box;
    }
    .header_container {
        background: #F1F1F1;
        text-align: center;
        padding: 20px;
    }
    .nav {
        margin: 20px 0 20px 0;
        background: rgb(137, 124, 143);
        overflow: hidden;
    }
    .nav a:hover{
        background: #ddd;
        color: black;
    }
    .nav a {
        float: left;
        display: block;
        font-size: 40px;
        padding: 14px 16px;
        text-decoration: none;
    }

    .column {
        float: left;
        padding: 10px;
    }
    .column.left {
        width: 25%;
    }
    .column.main {
        width: 50%;
    }
    /*清除列之后的浮动*/
    .content:after {
        content: "";
        display: table;
        clear: both;
    }
    /* 响应式布局 - 创建堆叠而非并排的三列 */
    @media screen and (max-width:600px) {
        .column {
            width: 100%;
        }
    }

    .foot {
        background-color: #F1F1F1;
        text-align: center;
        padding: 10px;
    }

</style>

<body>
<div class="flex_container">
    <div class="header_container">
        <h1>页眉</h1>
    </div>

    <div class="nav">
       <a href="#">Link</a>
       <a href="#">Link</a>
       <a href="#">Link</a>
       <a href="#">Link</a>
    </div>

    <div class="content">
        <div class="column left">
            <h1>Left Column</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
        </div>
        <div class="column main">
            <h2>Main Content</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
        </div>
        <div class="column right">
            <h2>Right Column</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
        </div>
    </div>

    <div class="foot">
        页脚
    </div>
</div>
</body>

</html>
